<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_商品列表练习</title>
</head>
<body>
<table border="1">
    <tr>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品数量</th>
    </tr>
</table>

<script>
    const arr = [
        {title:"小米手机",price:6000,num:100},
        {title:"华为手机",price:5000,num:400},
        {title:"苹果手机",price:7000,num:300},
        {title:"三星手机",price:8000,num:400},
        {title:"OPPO手机",price:5000,num:500},
    ];
    for (let i = 0; i < arr.length; i++){
        let trE = document.createElement('tr');
        let titleTd = document.createElement('td');
        let priceTd = document.createElement('td');
        let numTd = document.createElement('td');
        titleTd.innerHTML = arr[i].title;
        priceTd.innerHTML = arr[i].price;
        numTd.innerHTML = arr[i].num;
        trE.append(titleTd, priceTd, numTd);
        let table = document.querySelector('table');
        table.append(trE);
    }
</script>

</body>
</html>